<template>
  <NewCard title="填写材料">
    <h3 class="boxTitle">
      <p><span>*</span>{{ CalculateTitle }}</p>
      <div class="conditions">
        认证条件<svg-icon icon-class="ts_icon" @click="drawer = true" />
        <el-drawer
          title="专家认证条件"
          :visible.sync="drawer"
          size="40%"
          direction="rtl">
          <div class="conditionsTxt">
            <template v-for="doma in domainLabel">
              <h4>{{doma.name}}类专家</h4>
              <p v-html="doma.describable"></p>
            </template>
          </div>
        </el-drawer>
      </div>
    </h3>
    <!-- ------------------------1擅长领域------------------------ -->
    <div class="domain" v-if="datumStep == 1">
      <p class="ly_title">一级类别</p>
      <ul class="ly_labelOne">
        <li
          :class="domainOne == index ? 'isActive' : ''"
          v-for="(l1, index) in domainLabel"
          :key="l1.id"
          @click="clickDomainOne(index, l1)"
        >
          {{ l1.name }}
        </li>
      </ul>
      <p class="ly_title">二级类别</p>
      <ul class="ly_labelTwo">
        <li
          :class="domainTwo == index ? 'isActive' : ''"
          v-for="(l2, index) in labelTwo"
          :key="l2.id"
          @click="clickDomainTwo(index, l2)"
        >
          {{ l2.name }}
          <i v-show="calcSelected(l2)">{{ calcSelected(l2) }}</i>
        </li>
      </ul>
      <p class="ly_title">三级类别</p>
      <ul class="ly_labelThree">
        <li v-for="l3 in labelThree" :key="l3.id">
          <div class="ly_labelTDiv">
            <p>{{ l3.name }}</p>
            <el-checkbox :label="l3" v-model="l3.checked" @change="changeThreeCheck(l3)"></el-checkbox>
          </div>
          <!-- 选择镇区 -->
          <!-- <el-cascader
            v-if="selectTypeOne.areaType == '4'"
            size="large"
            popper-class="selectArea"
            :options="areaCodeOptions"
            :props="optionProps"
            v-model="l3.selectServiceArea"
            :show-all-levels="false"
            placeholder="选择服务地区"
            @change="changeArea"
          >
          </el-cascader> -->
        </li>
      </ul>
      <SubBtn :centerBtn="centerBtn">
        <template slot="btn">
          <el-button
            round
            class="addBtn"
            style="width: auto; padding: 10px 60px"
            @click="clickDomain"
            >填写下一项</el-button
          >
        </template>
      </SubBtn>
    </div>
    <!-- ------------------------2个人信息------------------------ -->
    <div class="userInfo" v-else-if="datumStep == 2">
      <el-form
        ref="rulesform"
        :rules="infoRules"
        :model="expert"
        label-width="130px"
        label-position="left"
      >
        <el-form-item label="头像" prop="imageUrl">
          <el-upload
            class="avatar-uploader"
            accept=".jpeg,.jpg,.png"
            action="#"
            :on-change="getFile"
            :auto-upload="false"
            :file-list="frontList"
            :show-file-list="false"
          >
            <img v-if="expert.imageUrl" :src="expert.imageUrl" class="avatar" />
            <el-button round v-else>点击上传</el-button>
          </el-upload>
          <p>请上传您的职业照片，建议尺寸300*300px，支持jpg/png格式</p>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input
            v-model="expert.name"
            placeholder="请填写您的的真实姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="expert.sex">
            <el-radio label="0">男</el-radio>
            <el-radio label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker
            v-model="expert.birthday"
            value-format="yyyy-MM-dd"
            type="date"
            prefix-icon="el-icon-arrow-down"
            placeholder="请选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="所在地区" prop="city">
          <el-cascader
            size="large"
            :options="options"
            v-model="selectedOptions"
            placeholder="省 / 市 / 区"
            @change="handleChange"
          >
          </el-cascader>
        </el-form-item>
        <!-- 咨询专家是否支持现场咨询 -->
        <el-form-item label="咨询类型" prop="site" v-if="type == '2'">
          <el-select v-model="expert.site" placeholder="请选择">
            <el-option label="图文咨询" value="0"></el-option>
            <el-option label="现场咨询" value="1"></el-option>
          </el-select>
        </el-form-item>
        <!-- type=3 项目专家才有服务地区 -->
        <!-- selectTypeOne.areaType == '3' 0海外1全国2省3市4区县 只有选择了市的才要选择城市 -->
        <el-form-item label="服务地区" prop="cityCode" v-if="type == '3' && selectTypeOne.areaType != '1'">
          <!-- serviceCity -->
          <!-- popper-class="selectArea" 镇区的加上这个 -->
          <el-cascader
            size="large"
            :popper-class="selectTypeOne.areaType=='4' ? 'selectArea':''"
            :options="serviceCity"
            :props="optionProps"
            :show-all-levels="false"
            v-model="selectServiceCity"
            placeholder="选择服务地区"
            @change="handleServiceCity">
          </el-cascader>
        </el-form-item>
        <el-form-item label="个人描述" class="textareaForm" prop="describable">
          <el-input
            type="textarea"
            :rows="10"
            resize="none"
            maxlength="1000"
            show-word-limit
            placeholder="请简单介绍您自己…"
            v-model="expert.describable">
          </el-input>
          <p class="addr"><span>{{expert.describable.length}}</span>/1000</p>
        </el-form-item>
      </el-form>
      <SubBtn>
        <template slot="btn">
          <el-button round @click="$emit('editStep', 1)">返回上一项</el-button>
          <el-button round class="addBtn" @click="infoNext()"
            >填写下一项</el-button
          >
        </template>
      </SubBtn>
    </div>
    <!-- ------------------------3个人证书------------------------ -->
    <div class="certificate" v-else-if="datumStep == 3">
      <el-form
        :model="expert"
        ref="certificateForm"
        label-width="130px"
        label-position="left">
        <div
          class="addcertBox"
          v-for="(cef, index) in expert.expertCertificateList"
          :key="index">
          <div class="addcertTitle">
            <h3>个人证书{{ index + 1 }}</h3>
            <div>
              <i class="el-icon-circle-plus-outline" @click="addCef"></i>
              <i class="el-icon-remove-outline" @click="removeCef(cef)"></i>
            </div>
          </div>
          <el-form-item
            label="证书名称"
            :prop="'expertCertificateList.' + index + '.id'"
            :rules="{
              required: true,
              message: '请选择证书',
              trigger: 'change',
            }">
            <el-select
              v-model="cef.id"
              placeholder="请选择证书名称"
              @change="changeCert($event, index)">
              <el-option
                :label="certl.name"
                :value="certl.id"
                v-for="certl in certificateList"
                :key="certl.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="证书编号"
            :prop="'expertCertificateList.' + index + '.no'"
            :rules="{
              required: true,
              message: '请输入证书编号',
              trigger: 'blur',
            }"
          >
            <el-input v-model="cef.no" placeholder="请填写证书编号"></el-input>
          </el-form-item>

          <el-form-item
            @click.native="getFn"
            label="取得时间"
            :prop="'expertCertificateList.' + index + '.getTime'"
            :rules="{
              required: true,
              message: '请输入取得时间',
              trigger: 'blur',
            }"
          >
            <div class="block">
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="cef.getTime"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </div>
          </el-form-item>
        </div>
      </el-form>
      <SubBtn>
        <template slot="btn">
          <el-button round @click="$emit('editStep', 2)">返回上一项</el-button>
          <el-button round class="addBtn" @click="clickCertificate"
            >填写下一项</el-button
          >
        </template>
      </SubBtn>
    </div>
    <!-- ------------------------4工作经历------------------------ -->
    <div class="workExper" v-else-if="datumStep == 4">
      <el-form
        :model="expert"
        ref="workExperForm"
        label-width="130px"
        label-position="left"
      >
        <div
          class="addcertBox"
          v-for="(work, index) in expert.expertWorkList"
          :key="index"
        >
          <div class="addcertTitle">
            <h3>工作经历{{ index + 1 }}</h3>
            <div>
              <i class="el-icon-circle-plus-outline" @click="addWork"></i>
              <i class="el-icon-remove-outline" @click="removeWork(work)"></i>
            </div>
          </div>
          <el-form-item
            label="公司名称"
            :prop="'expertWorkList.' + index + '.company'"
            :rules="{
              required: true,
              message: '请填写公司名称',
              trigger: 'blur',
            }"
          >
            <el-input
              v-model="work.company"
              placeholder="请填写公司名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="在职时间"
            :prop="'expertWorkList.' + index + '.date'"
            :rules="{
              required: true,
              message: '请选择在职时间',
              trigger: 'change',
            }">
            <el-date-picker
              v-model="work.date"
              type="daterange"
              range-separator="至"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="职位名称"
            :prop="'expertWorkList.' + index + '.postion'"
            :rules="{
              required: true,
              message: '请填写职位名称',
              trigger: 'blur',
            }"
          >
            <el-input
              v-model="work.postion"
              placeholder="请填写职位名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="工作描述"
            :prop="'expertWorkList.' + index + '.job'"
            :rules="{
              required: true,
              message: '请填写工作描述',
              trigger: 'blur',
            }"
          >
            <el-input
              type="textarea"
              v-model="work.job"
              placeholder="请填写工作描述"
              rows="5"
              resize="none"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <SubBtn>
        <template slot="btn">
          <el-button round @click="$emit('editStep', 3)">返回上一项</el-button>
          <el-button round class="addBtn" @click="clickWorkExper"
            >填写下一项</el-button
          >
        </template>
      </SubBtn>
    </div>
    <!-- ------------------------5教育经历------------------------ -->
    <div class="education" v-else-if="datumStep == 5">
      <el-form
        :model="expert"
        ref="educationForm"
        label-width="130px"
        label-position="left"
      >
        <div
          class="addcertBox"
          v-for="(edu, index) in expert.expertEducationList"
          :key="index"
        >
          <div class="addcertTitle">
            <h3>教育经历{{ index + 1 }}</h3>
            <div>
              <i class="el-icon-circle-plus-outline" @click="addEdu"></i>
              <i class="el-icon-remove-outline" @click="removeEdu(edu)"></i>
            </div>
          </div>
          <el-form-item
            label="学校"
            :prop="'expertEducationList.' + index + '.school'"
            :rules="{
              required: true,
              message: '请填写学校名称',
              trigger: 'blur',
            }"
          >
            <el-input
              v-model="edu.school"
              placeholder="请填写学校名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="学历"
            :prop="'expertEducationList.' + index + '.type'"
            :rules="{
              required: true,
              message: '请选择学历',
              trigger: 'change',
            }"
          >
            <el-select v-model="edu.type" placeholder="请选择学历">
              <el-option label="专科" value="1"></el-option>
              <el-option label="本科" value="2"></el-option>
              <el-option label="硕士" value="3"></el-option>
              <el-option label="博士" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="专业"
            :prop="'expertEducationList.' + index + '.major'"
            :rules="{
              required: true,
              message: '请填写专业名称',
              trigger: 'blur',
            }"
          >
            <el-input
              v-model="edu.major"
              placeholder="请填写专业名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="在校时间"
            :prop="'expertEducationList.' + index + '.date'"
            :rules="{
              required: true,
              message: '请选择在校时间',
              trigger: 'change',
            }"
          >
            <el-date-picker
              v-model="edu.date"
              type="daterange"
              range-separator="至"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </div>
      </el-form>
      <SubBtn>
        <template slot="btn">
          <el-button round @click="$emit('editStep', 4)">返回上一项</el-button>
          <el-button round class="addBtn" @click="clickEducation"
            >填写下一项</el-button
          >
        </template>
      </SubBtn>
    </div>

    <!-- ------------------------6相关附件------------------------ -->
    <div class="optionalUnits" v-else>
      <el-upload
        class="upload-demo"
        action="#"
        accept=".pdf,.doc,.docx,.jpg,.png"
        multiple
        :limit="10"
        :on-change="getFileList"
        :auto-upload="false"
        :on-exceed="handleExceed"
        :file-list="fileList"
        :show-file-list="false"
      >
        <div class="uploadBtn">
          <el-button round>点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            建议上传本人身份证、证书等材料，支持PDF、DOC、DOCX、JPG、PNG格式，单个附件大小不超过2M，最多不超过10个文件
          </div>
        </div>
      </el-upload>
      
      <!-- 附件列表展示 -->
      <div class="filelist-box">
        <ul>
          <li v-for="(file,index) in expert.files" :key="index">
            <span>附件{{index+1}}</span>
            <div>
              <p>{{file.name}}</p>
              <i class="el-icon-delete" @click="removeFile(index)"></i>
            </div>
          </li>
        </ul>                                                                                                    
      </div>
      <!-- 附件列表展示 end -->

      <SubBtn>
        <template slot="btn">
          <el-button round @click="$emit('editStep', 5)">返回上一项</el-button>
          <el-button round class="addBtn" @click="submitForm">提交材料</el-button>
        </template>
      </SubBtn>
    </div>
  </NewCard>
</template>

<script>
//引入省市区数据的插件
import { regionData, provinceAndCityData, CodeToText } from "element-china-area-data";
import {UrltoFile} from "@/wss/utils/wss.js";
import SubBtn from "./subBtn.vue";
import NewCard from "@/wss/components/newCard.vue";
import debounce from "lodash/debounce";
import {
  getConsultTypeListApi,
  getFindConsultTypeListApi,
  getServiceCityListApi,
  getExpertCertificateListApi,
  getExpertAddApi,
  getExpertEditApi,
  editUserProfileRecertificationApi,
  editUserProfileAvatarApi,
} from "@/BMViews/api/work/expert.js";
import {
  getProjectTypelistApi,
  getFindProjectTypelistApi,
} from "@/wss/newApi_3-24/work/projectType.js";
import {cityTree,inCityCodeClass,inAreaCodeClass} from "@/wss/utils/wss.js";
export default {
  name: "DatumForm",
  components: { NewCard, SubBtn },
  props: ["datumStep", "type", "userInfo", "isEdit"],
  data() {
    return {
      //分页参数
      pageing: { pageNum: 1, pageSize: 200 },
      drawer: false, //是否显示专家认证条件抽屉
      centerBtn: true, //按钮居中显示

      domainLabel: {}, // 获取的擅长领域列表
      domainOne: "0", //当前选中的一级类型擅长领域
      labelTwo: {}, //选择的二级类别擅长领域列表
      domainTwo: "", //当前选中的二级类型擅长领域
      labelThree: {}, //选择的三级类别擅长领域列表
      domainThree: [], //选择的三级类别擅长领域

      frontList: [], //头像的数据列表
      options: regionData, //省市区的数据
      selectedOptions: [], //选中的省市区

      serviceCity: provinceAndCityData,//服务城市
      selectServiceCity: [],//选择的服务城市 或者 镇区县（只能选一城市的镇）
      newAreaSelect: {},//当前选择的最新的市或者镇

      areaCodeOptions: regionData,//镇区县数据源只能选一城市的镇
      selectServiceArea:[],//选择的服务镇区县
      //服务城市 配置项
      optionProps:{
        multiple: true,
        value: 'value',
        label: 'label',
        children: 'children'
      },

      certificateList: [], //获取的专家证书列表

      //专家信息
      expert: {
        typeId:'',//当前选择的一级擅长领域
        //擅长领域的收集数据
        skilledList: [],
        //个人信息的收集数据
        imageUrl: "", //上传的头像
        name: "",
        sex: "0",
        birthday: "",
        province: "",//省
        city: "",//市
        location:"",//区
        describable: "",
        cityCode:'',//服务地区
        // 个人证书的数据
        expertCertificateList: [
          {
            id: "",
            no: "",
            isShow: "0",
            name: "",
            getTime: "",
          },
        ],
        //工作经历的数据
        expertWorkList: [
          {
            date: "", //工作经历选择的时间
            company: "",
            startTime: "",
            endTime: "",
            postion: "",
            job: "",
          },
        ],
        // 教育经历的数据
        expertEducationList: [
          {
            date: "", //教育经历选择的时间
            school: "",
            major: "",
            type: "",
            startTime: "",
            endTime: "",
          },
        ],
        //附件
        files: [],
      },
      //上传的附件列表
      fileList: [],

      selectTypeOne:{},//当前选择的一级类型数据

      //个人信息表单验证
      infoRules: {
        imageUrl: [{ required: true, message: "请上传头像", trigger: "blur" }],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        birthday: [
          { required: true, message: "请选择出生日期", trigger: "change" },
        ],
        site: [{ required: true, message: "请选择咨询类型", trigger: "change" }],
        city: [{ required: true, message: "请选择所在地区", trigger: "change" }],
        cityCode: [{ required: true, message: "请选择服务地区", trigger: "change" }],
        describable: [
          { required: true, message: "请输入个人描述", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    // 根据type判断选择哪种专家类型
    if(this.type == "2"){
      this.getConsultTypeList(); //2咨询专家
    }else if(this.type == "3"){
      this.getProjectTypelist(); //3项目专家
    }else{
      this.getConsultTypeList(); //1编辑专家
    }

    // this.getConsultTypeList();//默认查询一级类别领域：1一级类别 2二级类别 3三级类别
  },
  watch: {
    userInfo: {
      handler(newVal) {
        if (newVal.hasOwnProperty("info")) {
          console.log('userInfo变化了');
          let newObj = JSON.parse(JSON.stringify(newVal))
          let obj = Object.assign({}, newObj.info, newObj);
          obj.info = null;
          this.expert.expertWorkList = obj.expertWork

          // province: "",//省 city: "",//市 location:"",//区
          this.selectedOptions.push(obj.location.slice(0,2)+'0000')
          this.selectedOptions.push(obj.location.slice(0,4)+'00')
          this.selectedOptions.push(obj.location)
          this.expert.province = this.selectedOptions[0]
          this.expert.city = this.selectedOptions[1]

          //服务地区
          this.selectServiceCity = obj.cityCode.split(',')

          //把已上传文件转成文件流
          obj.expertFileList.forEach((item,i) => {
            this.expert.files.push({
              name: item.name,
              raw:'',
            })
            //转成文件流
            UrltoFile(item.url,(file) => {
              this.expert.files[i].raw = file
            },item.name);
          });

          this.expert = Object.assign(this.expert,obj);
        }
      },
      deep: true,
    },

    // 根据type判断选择哪种专家类型
    type(newValue, oldValue) {
      if(this.type == "2"){
        this.getConsultTypeList(); //2咨询专家
      }else if(this.type == "3"){
        this.getProjectTypelist(); //3项目专家
      }else{
        this.getConsultTypeList(); //1编辑专家
      }
    },

    // 监听选择城市的集合，拿到最新的那个 镇区县要用到
    selectServiceCity:{
      handler(newValue,oldValue){
        let res = newValue.filter(item => !oldValue.some(ele=> ele === item))
        this.newAreaSelect = res
      },
      sync: true,//先触发watch，在执行methods中的方法
    },
  },
  methods: {
    getFn() {
      // console.log(this.expert);
    },
    // 擅长领域******************************
    //获取咨询擅长领域的数据列表
    async getConsultTypeList() {
      const { pageNum, pageSize } = this.pageing;
      let result = await getFindConsultTypeListApi({ pageNum, pageSize });
      if (result.code == 200) {
        this.domainLabel = result.rows;
        //默认选中第一项擅长领域 显示二级类别和三级类别
        this.labelTwo = this.domainLabel[0].children; //二级类型数据
        this.labelThree = this.labelTwo[0].children; //三级类型数据
        this.expert.typeId = this.domainLabel[0].id //一级类型id
        this.selectTypeOne = this.domainLabel[0] //一级类型数据
      }
    },

    //获取项目擅长领域的数据列表
    async getProjectTypelist(){
      let result = await getFindProjectTypelistApi();
      if (result.code == 200) {
        this.domainLabel = result.rows;
        //默认选中第一项擅长领域 显示二级类别和三级类别
        this.labelTwo = this.domainLabel[0].children; //二级类型数据
        this.labelThree = this.labelTwo[0].children; //三级类型数据
        this.expert.typeId = this.domainLabel[0].id //一级类型id
        this.selectTypeOne = this.domainLabel[0] //一级类型数据
      }
    },
    
    //获取运营城市列表
    async getServiceCityList(){
      // const { pageNum, pageSize } = this.pageing;
      // let result = await getServiceCityListApi({ pageNum, pageSize })
      // if(result.code==200){
      //   this.serviceCity = cityTree(result.rows)
      // }
      return
      let arr = inCityCodeClass(this.selectTypeOne.cityCode)
      this.serviceCity = arr
    },
    
    
    // getAreaOptions(cityCode){
    //   return inAreaCodeClass(cityCode)
    // },

    // 获取镇区县的选择数据
    getAreaVisibleChange(l3){
      let arr = inAreaCodeClass(l3.cityCode)
      this.$set(l3,'cityCodeOptions',arr)
    },

    // 选择镇区县的回调
    changeArea(){
      let newCityCode = []
      this.selectServiceArea.forEach(item=>{
        newCityCode.push(item[2])
      })
      this.expert.cityCode = newCityCode.join(',')
    },

    //点击一级类别擅长领域
    clickDomainOne(index, l1) {
      this.domainOne = index;
      this.labelTwo = l1.children; //二级类型的数据
      this.labelThree = this.labelTwo[0].children; //三级类型数据
      this.expert.typeId = l1.id //一级类型的id
      this.selectTypeOne = l1 //一级类型的数据

      //切换一级类别擅长领域置空三级类别的列表
      this.domainTwo = "";
      this.domainThree = [];//清除已选的三级类别
      this.selectServiceCity = [] //清除已选的城市
      this.expert.cityCode = '' //清除已选的城市编码
      // 把三级类别的所有checked改成false
      this.domainLabel.forEach(one=>{
        one.checked = false
        if(one.children){
          one.children.forEach(two=>{
            two.checked = false
            if(two.children){
              two.children.forEach(three=>{
                three.checked = false
              })
            }
          })
        }
      })
      // 把三级类别的所有checked改成false end

      this.selectServiceArea = [] //清空已选的镇县区
    },

    //点击二级类别擅长领域
    clickDomainTwo(index, l2) {
      this.domainTwo = index;
      this.labelThree = l2.children;
    },

    // 选择三级类别的时候
    changeThreeCheck(l3){
      if(l3.checked){
        this.domainThree.push(l3)
      }else{
        let index = this.domainThree.findIndex((item) => item.id == l3.id) //获取下标
        this.domainThree.splice(index,1) // 根据下标去删数据
      }
    },
    
    //点击擅长领域填写下一项
    clickDomain() {
      // 不能为空
      if (this.domainThree.length < 1) {
        this.$message("请选择擅长领域");
      } else {
        // 判断一下如果选的这个三级类别checked=true, cityCode有值，并且selectServiceArea没值 不能点下一步
        // for (let i = 0; i < this.domainThree.length; i++) {
        //   let obj = this.domainThree[i]
        //   if(obj.checked){
        //     if(obj.cityCode && obj.cityCode != ''){
        //       if(!obj.selectServiceArea || obj.selectServiceArea.length<1){
        //         this.$message("请选择服务地区");
        //         return
        //       }
        //     }
        //   }
        // }
        // 判断一下如果选的这个三级类别cityCode有值，并且selectServiceArea没值 不能点下一步 end

        // 获取镇区的cityCode
        // let arr = []
        // this.domainThree.forEach(item=>{
        //   if(item.selectServiceArea && item.selectServiceArea.length>1){
        //     item.selectServiceArea.forEach(k=>{
        //       arr.push(k[2])
        //     })
        //   }
        // })
        // this.expert.cityCode = arr.join(',')

        // serviceCity 当选择的是镇区的时候改成 省市区的数据
        if(this.selectTypeOne.areaType == '4'){
          this.serviceCity = regionData
        }else if(this.selectTypeOne.areaType == '1'){
          // 无限制的类别要改成cityCode要改成无限制
          this.domainThree.forEach(item=>{
            item.cityCode = 'cn'
          })
        }

        // 获取擅长领域的列表
        this.domainThree.forEach((item) => {
          let id = item.id;
          this.expert.skilledList.push(item);
        });
        this.$emit("editStep", 2);
        this.getServiceCityList() //获取运营城市列表
      }
    },
    // 擅长领域******************************end

    // 个人信息*********************************
    //上传头像的回调
    getFile(file, fileList) {
      // console.log(file);
      //上传判断
      const isJPGPNG =
        file.raw.type == "image/jpeg" || file.raw.type == "image/png";
      const isLt1M = file.raw.size / 1024 / 1024 < 0.488;

      if (!isJPGPNG) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
        return;
      }else{
        if (!isLt1M) {
          this.$message.error("上传头像图片大小不能超过 500KB!");
          return;
        }else{
          if (fileList && fileList.length > 1) {
            fileList.shift();
          }
          this.frontList = fileList;
          this.expert.imageUrl = URL.createObjectURL(file.raw);
        }
      }
    },
    //选择省市区的回调
    handleChange() {
      // let txt1 = CodeToText[this.selectedOptions[0]];
      // let txt2 = CodeToText[this.selectedOptions[1]];
      // this.expert.province = txt1;
      // this.expert.city = txt2;

      this.expert.province = this.selectedOptions[0];
      this.expert.city = this.selectedOptions[1];
      this.expert.location = this.selectedOptions[2];
    },

    //选择服务地区的回调
    handleServiceCity(){
      if(this.selectTypeOne.areaType=='4'){
        // 只能选择一个城市的数据，在选择的时候把其他城市的数据清掉，只保留最新一个城市的镇区数据
        if(this.newAreaSelect.length>0){
          let lastCode = this.newAreaSelect[0][1]
          let newSelected = this.selectServiceCity.filter(item=>{
            return item[1] == lastCode
          })
          // 把过滤出来只剩下最后一个城市的数据赋值给选择的数据
          this.selectServiceCity = newSelected
        }
      }

      let newCityCode = []
      this.selectServiceCity.forEach(item=>{
        newCityCode.push(item[item.length-1])
      })

      this.expert.cityCode = newCityCode.join('，')
    },

    //个人信息点击填写下一项按钮
    infoNext() {
      // 填写个人信息的表单验证
      this.$refs.rulesform.validate((valid) => {
        if (valid) {
          // 获取专家证书的列表
          this.getExpertCertificateList();
          this.$emit("editStep", 3);
        } else {
          this.$message("请填写完整资料！");
          return false;
        }
      });
    },
    // 个人信息********************************* end

    // 个人证书********************************
    async getExpertCertificateList() {
      const { pageNum, pageSize } = this.pageing;
      let officeId = this.expert.typeId
      let result = await getExpertCertificateListApi({
        pageNum,
        pageSize,
        officeId
      });
      if (result.code == 200) {
        this.certificateList = result.rows;
      }
    },
    //选中一条证书的回调 赋值证书名称给name
    changeCert(id, index) {
      // 当前选中的证书name赋值给第index项的name
      let cert = this.certificateList.filter((item) => item.id == id);
      this.expert.expertCertificateList[index].name = cert[0].name;
    },
    // 新增一条个人证书
    addCef() {
      this.expert.expertCertificateList.push({
        id: "",
        no: "",
        isShow: "0",
        name: "",
      });
    },
    // 删除一条个人证书
    removeCef(item) {
      var index = this.expert.expertCertificateList.indexOf(item);
      if (index < 1) {
        this.$message("删除失败，至少要有一个证书！");
      } else {
        this.expert.expertCertificateList.splice(index, 1);
      }
    },
    //个人证书单击填写下一项
    clickCertificate() {
      this.$refs.certificateForm.validate((valid) => {
        if (valid) {
          this.$emit("editStep", 4);
        } else {
          this.$message("请填写完整个人证书");
          return false;
        }
      });
    },
    // 个人证书********************************end

    //工作经历********************************
    // 新增一条工作经历
    addWork() {
      this.expert.expertWorkList.push({
        date: "",
        company: "",
        startTime: "",
        endTime: "",
        postion: "",
        job: "",
      });
    },
    // 删除一条工作经历
    removeWork(item) {
      var index = this.expert.expertWorkList.indexOf(item);
      if (index < 1) {
        this.$message("删除失败，至少要有一个工作经历！");
      } else {
        this.expert.expertWorkList.splice(index, 1);
      }
    },
    //工作经历点击填写下一项
    clickWorkExper() {
      this.$refs.workExperForm.validate((valid) => {
        if (valid) {
          // 整理入职时间和离职时间,并且删除date字段
          this.expert.expertWorkList.forEach((item) => {
            console.log(item);
            let startTime = item.date[0];
            let endTime = item.date[1];
            item.startTime = startTime;
            item.endTime = endTime;
            // delete item.date;
          });
          this.$emit("editStep", 5);
        } else {
          this.$message("请填写完整工作经历");
          return false;
        }
      });
    },
    //工作经历********************************end

    // 教育经历*********************************
    // 新增一条教育经历
    addEdu() {
      this.expert.expertEducationList.push({
        date: "",
        school: "",
        major: "",
        type: "",
        startTime: "",
        endTime: "",
      });
    },
    // 删除一条教育经历
    removeEdu(item) {
      var index = this.expert.expertEducationList.indexOf(item);
      if (index < 1) {
        this.$message("删除失败，至少要有一个教育经历！");
      } else {
        this.expert.expertEducationList.splice(index, 1);
      }
    },
    //点击教育经历填写下一项
    clickEducation() {
      this.$refs.educationForm.validate((valid) => {
        if (valid) {
          // 整理在校时间和离校时间,并且删除date字段
          this.expert.expertEducationList.forEach((item) => {
            let startTime = item.date[0];
            let endTime = item.date[1];
            item.startTime = startTime;
            item.endTime = endTime;
            // delete item.date;
          });
          this.$emit("editStep", 6);
        } else {
          this.$message("请填写完整教育经历");
          return false;
        }
      });
    },
    // 教育经历*********************************end

    // 上传附件**********************************
    //上传附件列表的回调
    getFileList(file, fileList) {
      // console.log(fileList);
      //上传判断
      const isFormat =
        file.raw.type === "image/jpeg" ||
        file.raw.type === "image/png" ||
        file.raw.type === "application/pdf" ||
        file.raw.type === "application/msword" ||
        file.raw.type ===
          "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
      const isLt2M = file.raw.size / 1024 / 1024 < 2;
      console.log(fileList);

      if (!isFormat) {
        this.$message.error("只支持PDF、DOC、DOCX、JPG、PNG格式!");
        return;
      }else{
        if (!isLt2M) {
          this.$message.error("上传附件大小不能超过 2MB!");
          return;
        }else{
          if (fileList && fileList.length > 1) {
            fileList.shift(); 
          }
          this.expert.files.push(file);//把当前上传的文件添加到图片列表里面
          // this.expert.files = fileList;
        }
      }
      
    },
    //上传附件的限制
    handleExceed(files, fileList) {
      this.$message.warning(`最多不超过10个文件！`);
    },

    //点击删除附件按钮的回调
    removeFile(index){
      // 根据下标去删数据
      this.expert.files.splice(index,1)
    },
    // 修改信息
    editFn() {},

    //在上传附件位置点击提交材料按钮  debounce防抖
    submitForm: debounce(async function(){
      //修改头像*************
      let formAvatar = new FormData();
      formAvatar.append("avatarfile", this.frontList[0].raw);
      let resultAvatar = await editUserProfileAvatarApi(formAvatar);
      if (resultAvatar.code == 200) {
        console.log("修改头像成功");
      } else {
        return Promise.reject(resultAvatar.message);
      }

      //用户信息的提交*************
      let expert = this.expert;
      let type = this.type;
      let typeId = this.expert.typeId;
      let selectedOptions = this.selectedOptions;
      let formDate = new FormData();
      // console.log(expert.cityCode);
      //擅长领域
      if(type == "3"){
        expert.skilledList.forEach((item, i) => {
          formDate.append(`projectRuleList[${i}].typeId`, item.id);
          // 0海外1全国2省3市4区县
          if(this.selectTypeOne.areaType == '1'){
            // 无限制的
            formDate.append(`projectRuleList[${i}].cityCode`, item.cityCode);
          }else{
            // 市的和镇区的
            formDate.append(`projectRuleList[${i}].cityCode`, expert.cityCode);
          }
          // else if(this.selectTypeOne.areaType == '4'){
          //   // 选择镇区县
          //   let arr = [] //获得当前三级类别所选的镇区县
          //   if(item.selectServiceArea){
          //     item.selectServiceArea.forEach(item=>{
          //       arr.push(item[2])
          //     })
          //     formDate.append(`projectRuleList[${i}].cityCode`, arr.join("，"));
          //   }
          // }
        });
      }else{
        expert.skilledList.forEach((item, i) => {
          formDate.append(`skilledList[${i}].id`, item.id);
        });
      }
      //个人信息
      formDate.set("name", expert.name);
      formDate.set("type", type); //1编辑专家 2咨询专家 3项目专家
      formDate.set("expertType", type); //专家type
      formDate.set("birthday", expert.birthday);
      formDate.set("typeId", expert.typeId); //当前选择的类型id 财法税的id
      // formDate.set("province", expert.province);
      formDate.set("site", expert.site);//site 是否接受现场咨询
      formDate.set("location", expert.location);
      // formDate.set("cityCode", expert.cityCode);//服务地区
      formDate.set("describable", expert.describable);
      formDate.set("sex", expert.sex);
      // formDate.set("cityCode", selectedOptions[1]); //行政编号
      // 个人证书
      expert.expertCertificateList.forEach((item, i) => {
        formDate.append(`expertCertificateList[${i}].certificateId`, item.id);
        formDate.append(`expertCertificateList[${i}].no`, item.no);
        formDate.append(`expertCertificateList[${i}].isShow`, item.isShow);
        formDate.append(`expertCertificateList[${i}].name`, item.name);
        formDate.append(`expertCertificateList[${i}].getTime`, item.getTime);
      });
      //工作经历
      expert.expertWorkList.forEach((item, i) => {
        formDate.append(`expertWorkList[${i}].company`, item.company);
        formDate.append(`expertWorkList[${i}].endTime`, item.endTime);
        formDate.append(`expertWorkList[${i}].startTime`, item.startTime);
        formDate.append(`expertWorkList[${i}].job`, item.job);
        formDate.append(`expertWorkList[${i}].postion`, item.postion);
      });
      // 教育经历
      expert.expertEducationList.forEach((item, i) => {
        formDate.append(`expertEducationList[${i}].type`, item.type);
        formDate.append(`expertEducationList[${i}].endTime`, item.endTime);
        formDate.append(`expertEducationList[${i}].startTime`, item.startTime);
        formDate.append(`expertEducationList[${i}].major`, item.major);
        formDate.append(`expertEducationList[${i}].school`, item.school);
      });
      //相关附件 expertFileList
      expert.files.forEach((item, i) => {
        formDate.append(`file`, item.raw);
      });

      // 打印formDate
      // for (var key of formDate.entries()) {
      //     console.log(key[0] + ', ' + key[1]);
      // }

      //如果是重新提交走修改（isEdit是true），如果是第一次提交走添加
      if(this.isEdit){
        formDate.set("id", this.userInfo.info.id);
        formDate.set("no", this.userInfo.info.no);
        formDate.set("status", this.userInfo.info.status);
        formDate.set("userId", this.$store.state.user.userId);
        formDate.set("status", 0);
        if(this.userInfo.info.followId){
          formDate.set("followId", this.userInfo.info.followId);
        }
        // 新提交走修改
        let result = await getExpertEditApi(formDate)
        if (result.code == 200) {
          //修改左边步骤为3
          this.$emit("editPresentStep", 3);
          this.$message({
            message: "提交成功",
            type: "success",
          });
        } else {
          return Promise.reject(result.message);
        }
      }else{
        // 第一次提交走添加
        let result = await getExpertAddApi(formDate);
        if (result.code == 200) {
          //修改左边步骤为3
          this.$emit("editPresentStep", 3);
          this.$message({
            message: "提交成功",
            type: "success",
          });
        } else {
          return Promise.reject(result.message);
        }
      }
      
    },1000)
    // 上传附件**********************************end
  },
  computed: {
    //判断当前处于哪个步骤显示对应的标题
    CalculateTitle() {
      let title = "";
      if (this.datumStep == 1) {
        title = "擅长领域";
      } else if (this.datumStep == 2) {
        title = "个人信息";
      } else if (this.datumStep == 3) {
        title = "个人证书";
      } else if (this.datumStep == 4) {
        title = "工作经历";
      } else if (this.datumStep == 5) {
        title = "教育经历";
      } else {
        title = "相关附件";
      }
      return title;
    },
    //计算擅长领域的二级类别选中的数量
    calcSelected() {
      return function (l2) {
        let sum = 0;
        this.domainThree.forEach((item) => {
          if(item){
            if (item.pid == l2.id) {
              sum++;
            }
          }
        });
        return sum;
      };
    },
  },
};
</script>

<style scoped>
ul,
p,
h3 {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 抽屉:专家认证条件 */
.conditions svg {
  font-size: 16px;
  margin-left: 10px;
  cursor: pointer;
}
::v-deep .conditions .el-drawer__header {
  border-bottom: 1px solid #efefef;
  padding: 15px 0;
  margin: 0 20px 20px 20px;
}
::v-deep .conditions .el-drawer__header > span {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}
.conditions .conditionsTxt {
  padding: 0 20px;
}
.conditions .conditionsTxt h4 {
  margin: 0;
  font-size: 14px;
  color: #333;
  font-weight: bold;
  margin-bottom: 10px;
  margin-top: 30px;
}
.conditions .conditionsTxt h4:first-child {
  margin-top: 0;
}
.conditions .conditionsTxt p {
  position: relative;
  font-size: 12px;
  font-weight: 400;
  color: #666;
  line-height: 22px;
  /* padding-left: 10px; */
  white-space: pre-line;
}
.conditions .conditionsTxt p::before {
  /* content: "·"; */
  position: absolute;
  left: 0;
  top: 0;
}
/* 多选框 */
::v-deep .el-checkbox__label {
  display: none;
}

::v-deep .el-checkbox .el-checkbox__inner {
  width: 24px;
  height: 24px;
  border-color: #bbbbbb;
  background: #fff;
  border-radius: 50%;
}
::v-deep .el-checkbox .is-disabled .el-checkbox__inner {
  background: #f2f2f2;
}
::v-deep .el-checkbox .is-checked .el-checkbox__inner {
  border-color: #f87a23;
  background: #f87a23;
}
::v-deep .el-checkbox__input .el-checkbox__inner::after {
  content: "";
  width: 9px;
  height: 5px;
  border: 3px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 6px;
  left: 5px;
  vertical-align: middle;
  transform: rotate(0deg) scaleY(0);
  border-radius: 0px;
  background: none;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner::after {
  transform: rotate(-45deg) scaleY(1);
}

/* 标题 */
.boxTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: #f4f5f8;
  font-size: 14px;
  color: #999;
  padding: 10px 15px;
  border-radius: 4px;
}
.boxTitle p {
  font-weight: bold;
}
.boxTitle span {
  color: #f87a23;
  margin-right: 8px;
}
/* 认证条件提示 */
.tooltip {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #999;
}
.tooltip svg {
  font-size: 18px;
  margin-left: 8px;
  transition: all 0.5s;
  border-radius: 50%;
}

/* 擅长领域 */
.ly_title {
  color: #999;
  font-size: 12px;
  margin: 24px 0;
}
.ly_labelOne {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
.ly_labelOne li {
  flex: 1;
  background-color: #f1f3ff;
  border: 1px solid #e5e6e9;
  text-align: center;
  line-height: 50px;
  color: #686975;
  font-size: 18px;
  /* font-weight: bold; */
  margin-right: 1%;
  transition: all 0.3s;
  cursor: pointer;
}
.ly_labelOne li:first-child {
  border-radius: 40px 0 0 40px;
}
.ly_labelOne li:last-child {
  border-radius: 0 40px 40px 0;
  margin-right: 0;
}
.ly_labelOne li.isActive,
.ly_labelOne li:hover {
  background-color: #6A769F;
  color: #fff;
}
.ly_labelTwo {
  display: flex;
  flex-wrap: wrap;
}
.ly_labelTwo li {
  position: relative;
  width: 16%;
  line-height: 40px;
  border-radius: 20px;
  text-align: center;
  font-size: 14px;
  color: #333;
  margin-right: 5%;
  margin-bottom: 12px;
  background-color: #f4f5f8;
  transition: all 0.3s;
  cursor: pointer;
}
.ly_labelTwo li:nth-child(5n) {
  margin-right: 0;
}
.ly_labelTwo li > i {
  position: absolute;
  right: 0;
  top: -5px;
  display: block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  font-style: normal;
  font-weight: 400;
  background-color: #f87a23;
  color: #fff;
}
.ly_labelTwo li.isActive,
.ly_labelTwo li:hover {
  font-weight: bold;
  background-color: #fef1e9;
  color: #f87a23;
}
.ly_labelThree {
  margin-bottom: 100px;
}
.ly_labelThree li {
  margin-bottom: 30px;
}
.ly_labelThree li p {
  font-size: 16px;
  color: #333;
}
.ly_labelThree li .ly_labelTDiv{
  display: flex;
  justify-content: space-between;
  padding-bottom: 15px;
  border-bottom: 1px solid #ecedf0;
}
.ly_labelThree li .el-cascader{
  width: 100%;
  margin-top: 5px;
}
</style>
<style scoped>
/* 个人信息 */
.userInfo {
  width: 100%;
  padding: 30px 0;
  margin-bottom: 50px;
}
.userInfo .el-form{
  width: 100%;
}
.userInfo .el-select{
  width: 100%;
}
::v-deep .userInfo .el-form-item__label {
  font-weight: 400;
  color: #666;
  line-height: 44px;
}
::v-deep .userInfo .el-button {
  border: 2px solid #d7d7d7;
  font-weight: bold;
  font-size: 14px;
  color: #666;
}

.subBtn > .el-button:hover {
  border-color: #f87a23;
  color: #f87a23;
  background-color: transparent;
}
.subBtn > .el-button:focus {
  border-color: #bbb;
  color: #bbb;
  background-color: transparent;
}
.subBtn .el-button.addBtn:hover,
.subBtn .el-button.addBtn:focus {
  border-color: #f87a23;
  background-color: #f87a23;
  color: #fff;
  opacity: 0.9;
}

::v-deep .userInfo .el-form-item__content {
  display: flex;
  align-items: center;
  height: 44px;
}
::v-deep .userInfo .el-form-item__content .el-upload > .el-button {
  padding: 8px 25px;
}
::v-deep .userInfo .el-form-item__content .el-upload > img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
::v-deep .userInfo .textareaForm .el-form-item__content {
  position: relative;
  height: auto;
}
::v-deep .userInfo .textareaForm .el-form-item__content textarea {
  font-family: "Microsoft Yahei";
}
::v-deep .userInfo .textareaForm .el-form-item__content .el-input__count{
  display: none;
}
::v-deep .userInfo .el-form-item__content > p {
  margin-left: 10px;
  color: #999;
  font-size: 14px;
}

::v-deep .userInfo .el-form-item__content >.addr{
  color: #909399;
  background: #FFFFFF;
  position: absolute;
  font-size: 12px;
  bottom: 5px;
  right: 10px;
}
::v-deep .userInfo .el-form-item__content >.addr>span{
  color: #F67725;
}

::v-deep .userInfo .el-input__inner {
  height: 44px;
  line-height: 44px;
}
::v-deep .userInfo .el-radio-group {
  display: flex;
}
::v-deep .userInfo .el-radio {
  display: flex;
  align-items: center;
}
::v-deep .userInfo .el-radio .el-radio__label,
::v-deep .userInfo .el-radio.is-checked .el-radio__label {
  display: block;
  color: #333;
}
::v-deep .userInfo .el-date-editor {
  width: 100%;
}
::v-deep .userInfo .el-date-editor .el-input__inner {
  padding-left: 15px;
}
::v-deep .userInfo .el-date-editor .el-input__prefix {
  left: auto;
  right: 5px;
}
::v-deep .userInfo .el-date-editor .el-input__suffix {
  top: 1px;
  right: 25px;
}

::v-deep .userInfo .el-cascader {
  width: 100%;
}
::v-deep .userInfo .el-cascader .el-cascader__tags .el-tag{
  border: 1px solid #E8E8E8;
  background-color: #F7F7F7;
  border-radius: 15px;
}
::v-deep .userInfo .el-cascader .el-tag .el-icon-close{
  background-color:transparent;
  color: #9B9B9B;
}
</style>
<style scoped>
/* 个人证书 */
.certificate .el-form {
  margin-bottom: 100px;
}
.addcertBox {
  padding-top: 30px;
}
.addcertBox .addcertTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.addcertBox .addcertTitle h3 {
  font-size: 14px;
  color: #666;
  font-weight: bold;
}
.addcertBox .addcertTitle i {
  font-size: 18px;
  color: #999999;
  margin-left: 15px;
  cursor: pointer;
}
::v-deep .addcertBox .el-form-item .el-form-item__label {
  font-weight: 400;
  color: #666;
}
::v-deep .addcertBox .el-form-item .el-select {
  width: 100%;
}
::v-deep .el-date-editor.el-input {
  width: 100%;
}
</style>
<style scoped>
/* 工作经历 */
.workExper .el-form {
  margin-bottom: 100px;
}
.workExper .el-form .el-date-editor,
.education .el-form .el-date-editor {
  width: 100%;
  flex-wrap: wrap;
  padding: 0;
  border: 0;
}
::v-deep .workExper .el-form .el-date-editor > i,
::v-deep .education .el-form .el-date-editor > i {
  display: none;
}
::v-deep .workExper .el-form .el-date-editor > input,
::v-deep .education .el-form .el-date-editor > input {
  width: 46%;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  text-align: left;
  padding: 0 15px;
}
::v-deep .workExper .el-form .el-date-editor > span,
::v-deep .education .el-form .el-date-editor > span {
  width: 8%;
  padding: 0;
  line-height: 34px;
  text-align: center;
}
::v-deep .workExper .el-form .el-form-item .el-textarea textarea {
  font-family: "Microsoft Yahei";
}
/* 教育经历 */
.education {
  margin-bottom: 100px;
}
</style>
<style scoped>
/* 相关附件 */
.optionalUnits {
  padding: 30px 0;
  margin-bottom: 80px;
}
::v-deep .optionalUnits .el-upload .el-form-item__label {
  font-weight: 400;
  color: #666;
  line-height: 44px;
}
::v-deep .optionalUnits .el-upload .el-button {
  border: 2px solid #d7d7d7;
  font-weight: bold;
  font-size: 14px;
  color: #666;
  padding: 7px 25px;
}
.optionalUnits .uploadBtn {
  display: flex;
  align-items: center;
  text-align: left;
}
.optionalUnits .uploadBtn .el-upload__tip {
  margin-top: 0;
  margin-left: 14px;
  font-size: 12px;
  color: #bababa;
}
::v-deep .optionalUnits .el-upload .el-button:hover,
::v-deep .optionalUnits .el-upload .el-button:focus {
  color: #f87a23;
  border-color: #f87a23;
  background-color: #fff;
}
::v-deep .optionalUnits .el-upload-list {
  margin-top: 20px;
}
::v-deep .optionalUnits .el-upload-list .el-upload-list__item {
  padding: 10px;
  border-bottom: 1px solid #efefef;
  margin: 0px;
}
::v-deep .optionalUnits .el-upload-list .el-upload-list__item:hover {
  border-bottom-color: #fff;
}
::v-deep .optionalUnits .el-upload-list .el-upload-list__item .el-icon-close {
  display: block;
  top: 15px;
}

/* 附件列表 */
.filelist-box{
  margin: 30px 0;
}
.filelist-box ul>li{
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  margin-top: 15px;
}
.filelist-box ul>li>span{
  display: block;
  width: 8%;
  font-size: 14px;
  font-weight: 400;
  color: #B9B9B9;
}
.filelist-box ul>li>div{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #EFEFEF;
  padding-bottom: 15px;
}
.filelist-box ul>li>div>i{
  cursor: pointer;
}
</style>

<style lang="scss">
// selectArea是自定义浮层类目
.selectArea{
  .el-cascader-panel {
    .el-scrollbar:first-child {
      .el-checkbox {
        display: none;
      }
    }
    .el-scrollbar:nth-child(2) {
      .el-checkbox {
        display: none;
      }
    }
  }
}
</style>

<style scoped>
/* 响应式 */
@media (max-width: 1180px) {
  .subBtn{
    padding: 10px 30px;
  }
  .subBtn .el-button{
    padding: 8px 0;
  }
  ::v-deep .userInfo .el-form-item__content > p{
    line-height: 20px;
  }
  ::v-deep .userInfo .el-form-item__content .el-upload > .el-button {
    padding: 8px 12px;
  }
  .filelist-box ul>li>div{
    
  }
}
</style>
